<template>
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ span: 3}"
      :wrapper-col="{ span: 18 }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="标题"
        name="name"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.name" />
      </a-form-item>
  
      <a-form-item
        label="网址"
        name="url"
        :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <!-- <a-input-password v-model:value="formState.password" /> -->
        <a-input v-model:value="formState.url">
      <template #addonBefore>
        <a-select v-model:value="protocol" style="width: 90px">
          <a-select-option value="Http://">Http://</a-select-option>
          <a-select-option value="Https://">Https://</a-select-option>
        </a-select>
      </template>
      <template #addonAfter>
        <a-select v-model:value="suffix" style="width: 80px">
          <a-select-option value=".com">.com</a-select-option>
          <a-select-option value=".cn">.cn</a-select-option>
        </a-select>
      </template>
        </a-input>
      </a-form-item>
      <a-form-item
        label="图片"
        name="pic"
        :rules="[{ required: true }]"
      >
        <Uploading ref="uploadImgInstance"  @changePic="changePic" :initPic="formState.pic"/>
      </a-form-item>
      <a-form-item
        label="简介"
        name="intro"
      >
        <!-- <a-input type="textarea" v-model="intro" placeholder="请输入简介"></a-input> -->
        <a-textarea v-model:value="formState.intro" placeholder="请输入简介" allow-clear show-count :maxlength="100"/>

      </a-form-item>
      <a-form-item label="状态" name="status">
          <a-switch v-model:checked="formState.status"/>
      </a-form-item>

  
      <a-form-item :wrapper-col="{ offset: 3, span: 18 }">
        <a-space>
            <a-button type="primary" html-type="submit">
              {{ isEdit ? "更改" : "新增" }}
            </a-button>
            <a-button @click="reset" v-if="!isEdit">重置</a-button>
        </a-space>
        

      </a-form-item>
    </a-form>
  </template>
  <script setup>
 import { onMounted, reactive, ref, watch } from 'vue';
 import Uploading from "../../../../components/uploadimg.vue"
 import { defineProps } from 'vue';
 import { parseUrl, getSuffix } from "../../../../utils/tools";
 import {addBannerApi,updateBannerApi} from "../../../../api/banner"
import { message } from 'ant-design-vue';
 const router = useRouter();
 const uploadImgInstance = ref(null);
 const reset =()=>{
  formState.name = "";
  formState.pic = "";
  formState.status = true;
  formState.url = "";
  formState.intro = "";
}
onMounted(()=>{
// 调用refresh
// uploadImgInstance.value.refresh();
})

 const protocol = ref('http://');
 const suffix = ref('.com');
 const onFinish = async(values) => {
  console.log('Success:', values);
let { intro, name, pic, status, url} = values;
url = protocol.value + url + suffix.value;
    if (props.isEdit) {
      // 编辑提交数据
      const {id} = props.initVal;
      const res = await updateBannerApi(id,{
        id,intro, name, pic, status, url
      });
      if (res.affected === 1) {
        // 更新成功
        message.success("更新成功");
        setTimeout(() => {
        router.push({name:"banner"});
      }, 1000);
      }else{
        message.success("更新失败");
      }
    } else {
      // 新增数据提交
      // const { id } = props.initVal;
      const res = await addBannerApi({
        intro, name, pic, status, url
      });
      console.log(res);
      
      if (res) {
      message.success("添加成功即将返回");
      // 新增成功后需要返回到轮播图的列表页
      setTimeout(() => {
        router.push({name:"banner"});
        reset();
      }, 1000);   
      }
    }
}; 

 const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
};
// import uploadimg from '../../../../components/uploadimg.vue';
 const props = defineProps({
    isEdit: {
        type: Boolean,
        default: false
    },
    initVal: Object,
})
console.log(props.isEdit, props.initVal);
// 17
 const formState = reactive({
    name: '',
    url: '',
    intro: '',
    pic: '',
    status:true,
});
// 分解网址： www.baidu.com
watch(
  ()=> formState.pic,
  (newV) =>{
uploadImgInstance.value.refresh(newV)
  }
)
watch(() => props.initVal, (newVal) => {
    console.log(newVal);
    formState.name = newVal.name;
    formState.url = newVal.url;
    formState.intro = newVal.intro;
    formState.pic = newVal.pic;

    // 网址
    if (newVal.url.startsWith("http://") ||newVal.url.startsWith("https://")) {
    const { hostname, protocol: pro } = parseUrl(newVal.url)
    const [url, ext] = getSuffix(hostname);
    formState.url = url;
    protocol.value = pro + "//";
    suffix.value = ext;
    }
    
    

}
)
const changePic = (path) => {
    console.log(path);
    formState.pic = path;
}


//   网址的默认
// const protocol = ref('Http://');
  </script>